<template>
  <div>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-row :gutter="12">
          <a-col :md="2" :sm="4">
            <a-date-picker :allowClear="false" v-model="StartTime" placeholder="开始日期" @change="onChangeStartTime"/>
          </a-col>
          <a-col :md="2" :sm="4">
            <a-date-picker :allowClear="false" v-model="EndTime" placeholder="结束日期" @change="onChangeEndTime"/>
          </a-col>
          <a-col v-has="'admin:parkCode'" :md="4" :sm="8">
            <a-select  :value="ParkCode" :options="ParkOptions" @change="ParkSelect"
                      style="width:200px;">
            </a-select>
          </a-col>
          <a-col :md="4" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>

      </div>

    </a-card>
    <a-card
      :bordered="false"
      title="车流量分析"
    >
      <div class="chartWrap" id="CarVolumeChartWrap" :style="{height:500+'px'}"></div>
    </a-card>
  </div>
</template>

<script>
import {filterObj} from "@/utils/util";
import {getAction, httpAction} from "@api/manage";
import * as echarts from "echarts";

export default {
  name: "CarVolumeChart",
  data() {
    return {
      ParkCode: '',
      ParkOptions: [{value: '', label: '请选择停车场'}],
      queryParam: {
        "opTime_begin": "",
        "opTime_end": "",
        "type": "-1",
      },
      url: {
        ParkList: '/parking/parkInfo/list',
        list: '/form/ParkTotalInfo/list'
      },
      MyChartXData: [],
      currentStartTimeMillis:0,
      currentEndTimeMillis:0,
      CarEnterVolume: [],
      CarOutVolume: [],
      StartTime:'',
      EndTime:'',
    }
  },

  mounted() {
    this.loadParkData()
    this.ReCreateChart()
  },
  computed:{
    QueryDays:function () {
      return 30-((this.currentEndTimeMillis - this.currentStartTimeMillis)/1000/60/60/24)
    },
  },
  methods: {
    ReCreateChart(){
      this.$nextTick(()=>{
        this.chartCreate();
      })
    },
    onChangeStartTime(date, dateString) {
      this.queryParam.opTime_begin = dateString;
      this.currentStartTimeMillis = date._d.getTime();
    },
    onChangeEndTime(date, dateString) {
      this.queryParam.opTime_end = dateString;
      this.currentEndTimeMillis = date._d.getTime();
    },
    searchQuery() {
      let startTime = this.queryParam.opTime_begin;
      let endTime = this.queryParam.opTime_end;
      if (startTime !== "" && endTime !== "") {
        if (startTime > endTime) {
          this.$message.error("开始时间不能大于结束时间");
          return
        }
      }
      if (startTime === "" && endTime !== "") {
        this.$message.error("请选择开始时间");
        return
      }
      if (startTime !== "" && endTime === "") {
        this.$message.error("请选择结束时间");
        return
      }
      if(this.QueryDays<0)
      {
        this.$message.error("开始时间与结束时间的最大间隔为30天")
        return
      }
      this.chartCreate();
    },
    getQueryParams() {
      var param = Object.assign({});
      if (this.queryParam.opTime_begin !== "" && this.queryParam.opTime_end !== "") {
        param.startTime = this.queryParam.opTime_begin
        param.endTime = this.queryParam.opTime_end
      }
      param.parkCode = this.ParkCode
      return filterObj(param);
    },
    searchReset: function () {
      this.StartTime = ''
      this.EndTime = ''
      this.currentStartTimeMillis = 0
      this.currentEndTimeMillis = 0
      this.ParkCode = ''
      this.queryParam = {}
      this.chartCreate();
    },
    ParkSelect(value) {
      this.ParkCode = value
    },
    loadParkData(value) {
      var Params = {}
      httpAction(this.url.ParkList, Params, "get").then((res) => {
        if (res.success) {
          this.ParkOptions = [{value: '', label: '请选择停车场'}]
          res.result.records.forEach((park) => {
            this.ParkOptions.push({
              value: park.parkCode,
              label: park.parkName
            })
          })
          this.ParkCode = this.ParkOptions[0].value
        }
      })
    },
    chartCreate() {
      const Params = this.getQueryParams();
      getAction(this.url.list, Params).then((res) => {
        if(!document.getElementById('CarVolumeChartWrap'))
        {
          return
        }
        const myChart = echarts.init(document.getElementById('CarVolumeChartWrap'));
        var EnterNumber = 0
        var OutNumber = 0
        res.length=10
        this.ResetChart()
        res.result.forEach((item) => {
          this.MyChartXData.push(String(item.time))
          this.CarEnterVolume.push(String(item.enterCarNumber))
          EnterNumber += item.enterCarNumber
          this.CarOutVolume.push(String(item.outCarNumber))
          OutNumber += item.outCarNumber
        })
        myChart.setOption({
          title: {
             text:'停车场进出车辆统计('+'总记：{num|'+(EnterNumber+OutNumber)+'}辆)',
            textStyle: {
              rich: {
                num: {
                  color: '#000000',
                  fontWeight: 'bold',
                  fontSize: 18
                }
              }
            },
            left: 'center'

          },
          grid: {
            left: '5%',
            right: '5%'
          },
          xAxis: {
            data: this.MyChartXData,
            nameGap: 15,
            axisLabel: {
              interval:0,
              rotate:40
            }
          },
          yAxis: [{
            axisLabel: {
              formatter: (value) => {
                return value + '辆'
              }
            },
            splitNumber:10
          }],

          series: [
            {
              name: '入场车辆',
              type: 'line',
              data: this.CarEnterVolume,
              smooth: true,

              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0, color: 'rgb(216,255,207)'
                    },
                    {
                      offset: 1, color: 'rgb(255,255,255)'
                    }
                  ]
                }
              },
              lineStyle: {
                color: 'rgba(90, 148, 255, 1)'
              },
              itemStyle: {
                color: 'rgb(216,255,207)'
              },
            },
            {
              name: '出场车辆',
              type: 'line',
              data: this.CarOutVolume,
              smooth: true,
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0, color: 'rgba(207, 223, 255, 1)'
                    },
                    {
                      offset: 1, color: 'rgba(255, 255, 255, 1)'
                    }
                  ]
                }
              },
              lineStyle: {
                color: 'rgb(90,148,255)'
              },
              itemStyle: {
                color: 'rgb(56,123,255)'
              },
            },
          ],
          tooltip: {
            trigger: 'axis',
            backgroundColor:'rgba(53,109,249,0.8)',
            formatter:function (params,ticket,callback) {

              var Form = params[0].axisValue + "<br/><br/>"
              params.forEach((data)=>{
                Form += "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:"+data.color+"\"></span>" + data.seriesName+"：" + data.data+"  辆"+"<br/>"
              })
              return Form
            }
          }
        });
        window.clearTimeout()
        setTimeout(function (){
          window.onresize = function () {
            myChart.resize();
          }
        },300)
      })
    },
    ResetChart() {
      this.MyChartXData = []
      this.CarEnterVolume = []
      this.CarOutVolume = []
    },
  }
}
</script>

<style scoped>
@import '~@assets/less/common.less';
</style>